<template>
    <div>
        <nav-bar style="position: fixed;top: 0;left: 0;right: 0;"/>
        <div style="height: 45px;"></div>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
            <div ref="newsBg" class="header-news-bg">
                <div style="height: 100px">
                    <div class="header-news-title">
                        全国新冠肺炎
                    </div>
                    <div class="header-news-title-text">
                        疫情实时查
                    </div>
                </div>
                <statistics></statistics>
            </div>
            <div class="news-bg">
                <div class="main-content">
                    <h2 class="panel-title">
                        <line-block /> 国内疫情
                    </h2>
                    <fire-num></fire-num>
                    <h2 class="panel-title" style="padding-bottom: 0;">
                        <line-block /> 疫情地图
                    </h2>
                    <map-geo style="padding: 0 10px"></map-geo>
<!--                    <map-info style="padding: 15px"></map-info>-->
                    <h2 class="panel-title" style="padding-bottom: 0;">
                        <line-block /> 实时资讯
                    </h2>
                    <timeline v-if="listData.length">
                        <timeline-item bg-color="#9dd8e0">
                            <div class="cd-title">
                                {{ nowTime(listData[0].modifyTime) }}
                                <van-tag type="danger">最新</van-tag>
                            </div>
                            <card class="card-content">
                                <div class="card-content-title">
                                    {{ listData[0].title }}
                                </div>
                                <div class="card-content-text">
                                    {{listData[0].summary}}
                                </div>
                            </card>
                        </timeline-item>
                        <timeline-item v-for="(item,index) in listData.slice(1, listData.length)" :key="index"
                                       :hollow="true">
                            <div class="cd-title">
                                {{ nowTime(listData[0].modifyTime) }}
                            </div>
                            <card class="card-content">
                                <div class="card-content-title">
                                    {{ item.title }}
                                </div>
                                <div class="card-content-text">
                                    {{item.summary}}
                                </div>
                            </card>
                        </timeline-item>
                    </timeline>
                    <div class="no-data" v-else>
                        暂无数据
                    </div>
                    <div style="height: 45px;"></div>
                </div>

            </div>
        </van-pull-refresh>
    </div>

</template>

<script>
    import NavBar from "@/components/NavBar/index";
    import {Timeline, TimelineItem} from 'vue-cute-timeline'
    import Card from "@/components/Card/index";
    import LineBlock from "./line-block";

    import datas from '@/assets/newsData.js'
    import {parseTime} from "@/utils";
    import FireNum from "@/views/news/fire-num";
    import Statistics from "./statistics";
    import MapGeo from "@/components/MapGeo";
    import loadImage from "@/plugins/imageloader";

    export default {
        name: "news",
        components: {
            MapGeo,
            Statistics,
            FireNum,
            Card,
            NavBar, Timeline,
            TimelineItem,
            LineBlock
            // TimelineTitle
        },
        computed: {
            listData() {
                return datas.data.timeline
            },

        },
        data() {
            return {
                list: [],
                loading: false,
                finished: false
            };
        },
        created() {
            this.$store.dispatch('getYIQINGdata')
        },
        mounted() {
            loadImage(['img/header_bg.jpg'], () => {
                this.$refs.newsBg.style.backgroundImage = 'url("img/header_bg.jpg")'
            })
        },
        methods: {
            nowTime(time) {
                return parseTime(time)
            },
            onRefresh() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                this.$store.dispatch('getYIQINGdata').then(() => {
                    setTimeout(() => {
                        // 加载状态结束
                        this.loading = false;
                    }, 500);
                })
            }
        }
    }
</script>

<!--<style>-->
<!--    .news-bg .van-nav-bar {-->
<!--        background: #ffd5b1;-->
<!--    }-->
<!--    .news-bg .van-nav-bar__title {-->
<!--        color: #ffffff;-->
<!--    }-->
<!--</style>-->
<style lang="less" scoped>
    .header-news-bg{
        /*background: url("../../../public/img/header_bg.jpg") no-repeat;*/
        background-repeat: no-repeat;
        background-size: 100%;
        width: auto;
        height: 240px;
    }
    .header-news-title{
        font-family: Microsoft YaHei, 'Avenir', Helvetica, Arial, sans-serif;
        font-weight: 600;
        font-size: 20px;
        color: #61d3f8;
        padding: 20px 0 0 10px;
        &-text{
            font-family: Microsoft YaHei, 'Avenir', Helvetica, Arial, sans-serif;
            font-weight: 600;
            font-size: 28px;
            color: #ffffff;
            padding: 10px 0 0 10px;
        }
    }

    .news-bg {
        background: #ffd5b1;
        padding: 15px;
    }

    .main-content {
        background: #ffffff;
        border: none;
        border-radius: 8px;
        box-shadow: 0px 0px 8px #cccccc;
    }

    .panel-title {
        padding: 15px;
        font-weight: bold;
    }

    .cd-title {
        font-size: 13px;
        color: #cccccc;
        margin-bottom: 10px;
    }

    .card-content {
        line-height: 1.1;

        .card-content-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .card-content-text {
            font-size: 15px;
            color: #666666;
        }
    }

    .no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 300px;
        width: auto;
    }
</style>
